<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">		<block slot="backText"></block>
			<block slot="content">积分明细</block>
		</cu-custom>
	<view class="whole-box">
	<!-- <view class="whole-box" style="background-color: #FB7483;"> -->
		<view class="bg-blue overflow padding-lg text-white relative money-top-box" >
			<view class="margin-tb ">当前积分</view>
			<view class="text-xl text-bold "  style="font-size: 25px;">{{member?member.account.user_integral:'-'}}</view>
			<!-- <view class="absolute loglg padding-xs" @tap="goPage('/pages/member/interval/recharge')">
				充值
			</view> -->
			<view class="absolute loglg2 padding-xs"  @tap="goPage('/pages/income/balance_integral')">
				转账
			</view>

		</view>
		<view class="scroll-vred" style="margin-top: 10px;">
			<scroll-view scroll-x class="nav text-center" style="height: 40px;">
				<view class="cu-item" :class="0==TabCur?' cu-item-active text-'+theme:'text-white'" @tap="tabSelect" data-id="0" >
					收入
				</view>
				<text :class="0==TabCur?'text-left-active':''"></text>
				<view class="cu-item" :class="1==TabCur?' cu-item-active text-'+theme:'text-white'" @tap="tabSelect" data-id="1" >
					支出
				</view>
				<text :class="1==TabCur?'text-right-active':''"></text>
			</scroll-view>
		</view>
		
			<view class="gold-black-box">
				<!-- <view class="top-box">
					<image class="top-box-bg" src="@/static/black_bg/stander-box.png" mode="aspectFill"></image>
					<view class="top-box-content">
						<view class="note-price">
							<text class="note">积分记录</text>
							<text class="price text-price">{{member?member.account.user_integral:'-'}}</text>
						</view>
						<image class="icon-gold-tixian" src="@/static/icon-gold-money.png" mode="aspectFill"></image>
					</view>
				</view> -->
				<view class="list">
					<scroll-view scroll-y :style="list.length == 0 ? 'height:100px;' : 'height:'+scrollHeight+'px'" @scrolltolower="getMore">
						<block v-for="(item,index) in list" :key="index" v-if="list.length != 0">
							<view class="my-data-box">
								<!-- <image class="my-data-box-bg" src="@/static/black_bg/stander-box.png" mode="aspectFill"></image> -->
								<view class="my-data-box-content">
									<view class="left-box">
										<view class="title">{{item.remark}}</view>
										<view class="time">来源:{{item.fromMember?item.fromMember.nickname:'-'}}</view>
										<view class="time">{{$common.timeFormat(item.created_at)}}</view>
									</view>
									<view class="num up" >{{item.num}}</view>
								</view>
							</view>
						</block>
						<block v-if="list.length == 0">
								<text style="color: #ffffff;">暂无数据</text>
						</block>
						<view v-else class="cu-load margin-center text-white" :class="loading?'loading':'over'"></view>
					</scroll-view>
				</view>
			</view>
		</view>
		<!-- <view class="cu-list bg-white">
			<block v-for="(item,index) in list" :key="index">
				<view class="padding solid-bottom margin-bottom">
					<view class="space-between">
						<view>{{item.remark}}</view>
						<view class="text-orange">{{item.num}}</view>
					</view>
					<view class="text-gray margin-top-xs">
						{{$common.timeFormat(item.created_at)}}
					</view>
				</view>
			</block>
		</view> -->

		<!-- <view class="cu-load margin-center" :class="loading?'loading':'over'"></view> -->
	</view>
</template>

<script>
	export default {
		mounted() {
			this.getScrollH()
		},
		data() {
			return {
				member: null,
				config: null,
				CLOUDPATH: this.$config.cloudPath,
				theme: this.$config.THEME(),
				TabCur: 0,
				list: [],
				hasMore: true,
				loading: false,
				page: 1,
				scrollHeight: 100,
			}
		},
		onLoad(options) {
			if (this.$common.loginAuth(true)) {
				this.getList()
				this.$common.getConfig().then((config) => {
					this.config = config
					
				})
			}
			
			console.log(this.scrollHeight)
		},
		onShow() {
			if (this.$common.loginAuth(true)) {
				this.$common.getMember().then((member) => {
					this.member = member
				})
			}
		},
		methods: {
			getMore(){
				this.getList()
			},
			canShowUser(credit_group){
				if(credit_group == 'lucky_draw_points'
				|| credit_group == 'win_comm_one'
				|| credit_group == 'manger'
				// || credit_group == ''
				){
					return true;
				}
				return false;
			},
			getScrollH() {
				let sys = uni.getSystemInfoSync();
				let winHeight = sys.windowHeight;
				//console.log(winHeight)
				let _this = this
				// 计算scroll-view高度
				let query = uni.createSelectorQuery().in(_this);
				query.select('.scroll-vred').boundingClientRect()
				query.selectViewport()
				query.exec(function(res) {
					//console.log(res)
					_this.scrollHeight = winHeight - res[0].bottom - 12 - 24
					
				})
			},
			tabSelect(e) {
				if (this.TabCur != e.currentTarget.dataset.id) {
					this.TabCur = e.currentTarget.dataset.id
					this.list = []
					this.page = 1
					this.hasMore = true
					this.loading = false
					this.getList()
				}
			},
			getList() {
				if (this.hasMore && !this.loading) {
					this.loading = true
					let type = this.TabCur == 0 ? 1 : -1
					this.$http
						.get('integral_details', {
							credit_type: 'user_integral',
							type: type,
							page: this.page
						})
						.then((response) => {
							let list = this.list
							if (response.data.data.length > 0) {
								list = list.concat(response.data.data)
							} else {
								this.hasMore = false
							}
							this.list = list
							this.page += 1

							this.loading = false
							uni.hideLoading()
						})
						.catch((response) => {
							uni.hideLoading()
						})

				}
			}
		},
		
		// onReachBottom() {
		// 	this.getList()
		// }
	}
</script>



<style>
	.text-left-active{
		width: 5%;
		height: 2px;
		background-color: #ffffff;
		content: '';
		position: absolute;
		bottom: 0px;
		left: 50%;
		margin-left: -12%;
	}
	.text-right-active{
		width: 5%;
		height: 2px;
		background-color: #ffffff;
		content: '';
		position: absolute;
		bottom: 0px;
		left: 50%;
		margin-left: 7%;
	}
	
	.cu-item{
		height: 30px;
		width: 70px;
		line-height: 29px;
		border-radius: 15px;
	}
	.cu-item-active{
		background-color: #ffffff;
		color: #1A181E!important;
	}
	.money-top-box{
		color: #000000;
		background-color: #ffffff;
		width: 85%;
		margin: 0 auto;
		border-radius: 10px;
		height: 106px;
		margin-top: 20px;
	}
	.txbtn {
		min-width: 160rpx;
	}
	
	.loglg {
		right: 20px;
		top: 60rpx;
		border-radius: 15px;
		width: 70px;
		background-color: #1A181E;
		text-align: center;
		height: 25px;
		line-height: 17px;
		color: #ffffff;
	}
	
	.loglg2 {
		right: 20px;
		top: 130rpx;
		border-radius: 15px;
		width: 70px;
		background-color: #1A181E;
		text-align: center;
		height: 25px;
		line-height: 17px;
		color: #ffffff;
	}
	.whole-box{
		/* background-color: #333333; */
		min-height: calc(100vh - 45px);
		padding: 12px 0;
		/* position: fixed; */
		width: 100%;
		background-image: url(../../../static/red-new/new-back.png);
		background-size: 100% 100%;
	}
	.gold-black-box{
		padding: 12px 0;
		margin: 0 10rpx;
		/* border: 2rpx solid #999999; */
		border-radius: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.gold-black-box .top-box{
		/* margin-top: 25rpx; */
		width: 690rpx;
		height: 276rpx;
		/* border: 2rpx solid #999999; */
		border-radius: 30rpx;
		overflow: hidden;
		position: relative;
	}
	.top-box .top-box-bg{
		width: 100%;
		height: 100%;
	}
	.top-box .top-box-content{
		width: 690rpx;
		/* height: 276rpx; */
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 30rpx;
		padding: 0 30rpx;
	}
	.top-box-content .note-price{
		flex: 1;
		height: 102rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.note-price .note{
		font-size: 36rpx;
		font-weight: bold;
		color: #E5D4B9;
	}
	.note-price .price{
		font-size: 38rpx;
		font-weight: bold;
		color: #FFFFFF;
	}
	.top-box-content .icon-gold-tixian{
		width: 92rpx;
		height: 106rpx;
		flex-shrink: 0;
		margin-left: 20rpx;
	}
</style>

<style>
	.gold-black-box .list{
		/* margin-top: 10px; */
	}
	.list .my-data-box{
		margin-top: 20rpx;
		width: 690rpx;
		height: 220rpx;
		/* border: 2rpx solid #999999; */
		border-radius: 30rpx;
		overflow: hidden;
		position: relative;
		background-color: #ffffff;
	}
	.list .my-data-box:first-child{
		margin-top: 0;
	}
	.my-data-box .my-data-box-bg{
		width: 100%;
		height: 100%;
	}
	.my-data-box .my-data-box-content{
		width: 690rpx;
		height: 160rpx;
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 40rpx;
	}

	.my-data-box-content .left-box{
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: space-between;
	}
	.left-box .title{
		width: 	500rpx;
		font-size: 34rpx;
		font-weight: bold;
		color: #000000;
		overflow: hidden;    
		text-overflow:ellipsis;    
		white-space: nowrap;
		margin-top: 30px;
	}
	.left-box .time{
		margin-top: 16rpx;
		font-size: 34rpx;
		color: #000000;
	}
	.my-data-box-content .num{
		margin-left: -60rpx;
		font-size: 40rpx;
		font-weight: bold;
		color: #3C3A3A;
	}
	.my-data-box-content .num.up{
		color: #1A181E;
	}
	.item .num.down{
		color: #00D723;
	}
</style>